<template>
  <div class="address-container">
    <!-- 标题 -->
    <div class="title">收货地址</div>
    <!-- 新增地址 -->
    <div class="manage-address">
      <div class="address-text">常用地址</div>
      <div class="add-address" @click="$router.push('/addaddress')">
        <van-icon name="plus" />
        <span>新增</span>
      </div>
    </div>
    <!-- 地址列表 -->
    <div class="address-list">
      <van-address-list :list="addressList" default-tag-text="默认" add-button-text="确认" v-model="chosenAddressId" @add="selectAddress" @edit="onEdit" />
    </div>
  </div>
</template>

<script>
import axios from '@/utils/request/request'
import { Notify } from 'vant'
export default {
  name: 'selectAddress',
  data() {
    return { addressList: [], chosenAddressId: '', show: false }
  },
  methods: {
    // 获取收货地址
    async getAllAddress() {
      try {
        const data = await axios.get('/user/address/list')
        if (data.code === 0) {
          // 默认选中默认地址
          this.addressList = data.data.map((item) => {
            if (item.status === 1) {
              this.chosenAddressId = item.id
              this.address = item.address
              this.name = item.name
              this.phone = item.phone
              // 修改父级chosenAddressId
              this.$emit('setChosenAddressId', item.id)
              return {
                id: item.id,
                tel: item.phone,
                name: item.name,
                address: item.province + item.city + item.country + item.address,
                addressDetail: item.address,
                isDefault: true
              }
            } else {
              return {
                id: item.id,
                tel: item.phone,
                name: item.name,
                address: item.province + item.city + item.country + item.address,
                addressDetail: item.address,
                isDefault: false
              }
            }
          })
        } else if (data.msg === '身份认证错误' || data.code === 403) {
          Notify({
            type: 'danger',
            message: data.msg,
            duration: 1000,
            onClose: () => {
              localStorage.removeItem('user_token')
              this.$router.replace('/login')
            }
          })
        } else {
          Notify({
            type: 'danger',
            message: data.msg,
            duration: 1000
          })
        }
      } catch {
        Notify({
          type: 'danger',
          message: '请求失败！',
          duration: 1000
        })
      }
    },
    // 选中收货地址
    selectAddress() {
      this.addressList.some((item) => {
        if (item.id === this.chosenAddressId) {
          this.$emit('setChosenAddressId', item.id)
          this.$emit('editUserInfo', { addressDetail: item.addressDetail, name: item.name, tel: item.tel })
          return true
        }
      })
    },
    // 编辑收货地址
    onEdit(address) {
      this.$router.push('/editaddress/' + address.id)
    }
  },
  created() {
    this.getAllAddress()
  }
}
</script>

<style lang="less" scoped>
.address-container {
  max-height: 550px;
  min-height: 450px;
  padding: 15px 0 60px;

  .title {
    font-size: 18px;
    text-align: center;
    font-weight: 700;
    background-color: #fff;
  }

  .manage-address {
    margin-top: 10px;
    display: flex;
    padding: 0 10px;
    align-items: center;
    justify-content: space-between;

    .add-address {
      ::v-deep .van-icon.van-icon-plus {
        color: #ff6034;
        font-size: 12px;
      }
      span {
        color: #ff6034;
        font-size: 12px;
      }
    }
  }

  .address-list {
    margin-top: 10px;
    background-color: #f1f1f1;
    min-height: 350px;

    ::v-deep .van-address-item .van-radio__icon--checked .van-icon,
    .van-tag--danger,
    .van-button--danger {
      background-color: #ff6034;
      border-color: #ff6034;
    }
  }
}
</style>
